<template>
  <div class="selectChapter" >
    <div class="title"><span>选择章节</span>  <span class="closed" @click="Close()"><img src="static/img/close.png"></span></div>
    <div class="cont">
      <div class="m-left">
        <h3 class="tit">国学</h3>
        <ul><li class="cur">弟子规</li><li>三字经</li><li>千字文</li><li>声律启蒙</li><li>大学</li><li>论语</li><li>诗词鉴赏</li></ul>
      </div>
      <div class="m-right ">
        <div class="  sel-c">
        <dl>
          <dt>总序</dt><dd>

          <a class="cur">第一课 总序</a>
        </dd>
        </dl><dl>
        <dt>入则孝</dt><dd>
        <a class="cur" href="#">第二课 父母呼</a>
        <a href="#">第三课 冬则温</a>
        <a href="#">第四课 亲所好</a>
        <a href="#">第五课 亲有过</a>
        <a href="#">第六课 亲有疾</a>
      </dd>
      </dl><dl>
        <dt>出则第</dt><dd>
        <a href="#">第七课 兄道友</a>
        <a href="#">第八课 或饮食</a>
        <a href="#">第九课 长者立</a>
      </dd>
      </dl>
        <dl>
          <dt>谨</dt><dd>
          <a href="#">第十课 朝起早</a>
          <a href="#">第十一课 冠必正</a>
          <a href="#">第十二课 对饮食</a>
          <a href="#">第十三课 步从容</a>
          <a href="#">第十二课 对饮食</a>
          <a href="#">第十六课 将入门</a>
          <a href="#">第十七课 用人物</a>
        </dd>
        </dl>
        <dl>
          <dt>信</dt><dd>
          <a href="#">第十八课 凡出言</a>
          <a href="#">第十九课 见未真</a>
          <a href="#">第二十课 见人善</a>
          <a href="#">第二十一课 闻过怒</a>
        </dd>
        </dl>
        </div>
        <div class="mt30 botact"><button class="cancel"  type="info">取消</button> <button  @click="goNext()" class="sure">下一步</button></div>
      </div>
    </div>

    <div class="arrow-right"></div>

    <div class="bhDig"  v-if="isGroup == true">

      <div class="title" style="width: 100%;"><span>选择备课</span>  <span class="closed"   @click="isGroup = false"><img src="static/img/close.png"></span></div>
        <div class="form-add">
          <dl><dt><i>*</i>备课标题：</dt><dd><el-input v-model="input"  style="width: 405px;"  placeholder="请输入备课标题"></el-input> </dd></dl>
          <dl><dt><i>*</i>备课班级：</dt><dd style="  width: 400px;">
            <el-select
              style="width: 100%;"
              v-model="value2"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </dd></dl>
          <dl><dt><i>*</i>课件选择：</dt><dd>已添加8个资源，拖动缩略图进行排序</dd></dl>
        </div>
      <ul class="select-list"  @click="goDetail()">
        <li>
          <label class="del"></label>
          <div class="pic"><div class="pic_area"><img src="static/img/pic.jpg"></div></div>
          <p class="tit">1、三字经资源 </p>
        </li>
        <li>
          <label class="del"></label>
          <div class="pic"><div class="pic_area"><img src="static/img/pic.jpg"></div></div>
          <p class="tit">1、三字经资源 </p>
        </li>
        <li>
          <label class="del"></label>
          <div class="pic"><div class="pic_area"><img src="static/img/pic.jpg"></div></div>
          <p class="tit">1、三字经资源 </p>
        </li>
        <li>
          <label class="del"></label>
          <div class="pic"><div class="pic_area"><img src="static/img/pic.jpg"></div></div>
          <p class="tit">1、三字经资源 </p>
        </li>
        <li>
          <label class="del"></label>
          <div class="pic"><div class="pic_area"><img src="static/img/pic.jpg"></div></div>
          <p class="tit">1、三字经资源 </p>
        </li>
        <li>
          <label class="del"></label>
          <div class="pic"><div class="pic_area"><img src="static/img/pic.jpg"></div></div>
          <p class="tit">1、三字经资源 </p>
        </li>

      </ul>

      </div>

  </div>
</template>

<script>
import Header from '../../components/header.vue';
export default {
  data() {
    return {
      input:'',
      isGroup:true,
      isOpen:true,
      options2: [{
        value: '六年级一班',
        label: '六年级一班'
      }, {
        value: '六年级2班',
        label: '六年级2班'
      } ],
      value: [],
      value2: []
    };
  },
  created() {
  },
  methods: {
    goNext(){
      this.$router.push("/selectChapter2");
    }
  },
  components:{Header}
};
</script>

<style lang="scss" scoped>
html body{ background: #FFFFFF;}
</style>
